<template>
  <div>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
      <a class="navbar-brand">霍兰德测试结果</a>
    </nav>
    <nav class="navbar navbar-expand-sm bg-light navbar-light fixed-bottom">
      <span class="navbar-text" style="color:lightgrey">成都终端管制室 创新工作室 2021</span>
      <ul class="navbar-nav">
        <li class="nav-item">
          <button type="button" class="btn btn-dark" @click="goNext">下一步</button>
        </li>
      </ul>
    </nav>
    <div class="container-fluid" style="margin-top:0px;margin-bottom:60px">
      <table class="table table-striped">
        <thead>
          <tr>
            <th>-</th>
            <th v-for="item in asix_x" :key="item.id">
              {{item.letter}}:
              {{item.title}}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item,key) in content" :key="item.id">
            <td v-if="key<asix_y.length">
              {{asix_y[key].index}}:
              {{asix_y[key].title}}
            </td>
            <td v-if="key==asix_y.length">总分</td>
            <td v-for="score in item" :key="score.id">{{score}}</td>
          </tr>
        </tbody>
      </table>
      <!-- <p style="color:lightgrey;font-size:0.8em">成都终端管制室 创新工作室 2021</p> -->
    </div>
  </div>
</template>

<script>
export default {
  name: "HollandFinalView",
  data() {
    return {};
  },
  computed: {
    devMode() {
      return this.$store.state.devMode;
    },
    cell() {
      return this.$store.state.hollandData.scoreData.values;
    },
    asix_x() {
      return this.$store.state.hollandData.baseData.brief.types;
    },
    asix_y() {
      return this.$store.state.hollandData.baseData.brief.parts;
    },
    content() {
      return this.calc();
    }
  },
  methods: {
    goNext() {
      this.$store.commit("routerNext");
      this.$router.push(this.$store.state.routerData.nextView);
      if (this.devMode) {
        window.console.log(this.$store.state.routerData.nextView);
      }
    },
    calc() {
      window.console.log("calc()");
      let arr = [];
      for (let i = 0; i < this.asix_y.length; i++) {
        let subarr = [];
        for (let j = 0; j < this.asix_x.length; j++) {
          let value = 0;
          for (let k = 0; k < this.cell.length; k++) {
            if (
              this.cell[k].t == this.asix_x[j].letter &&
              this.cell[k].p == this.asix_y[i].index
            ) {
              value += this.cell[k].v;
            }
          }
          subarr.push(value);
        }
        arr.push(subarr);
      }
      let subarr = [];
      for (let i = 0; i < arr[0].length; i++) {
        let value = 0;
        for (let j = 0; j < arr.length; j++) {
          value += arr[j][i];
        }
        subarr.push(value);
      }
      arr.push(subarr);
      if (this.devMode) {
        window.console.clear();
        window.console.log(JSON.stringify(arr));
      }
      return arr;
    }
  }
};
</script>